<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hai, I'm so ku.</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="../static/main.css" />
    <script src="../static/haiku.js"></script>
  </head>

  <body>
    <div id="container">
      <h1>Happy Haikuing, Bitches</h1>
      <p>
	It's your turn chump.  Just add the next word (no more than
	{{ maxSyllables }} syllables).
      </p>

      <div id="poem">
	<p>
	  <span id="line1">
	    {{ s11 }} {{ s12 }} {{ s13 }} {{ s14 }} {{ s15 }}	    
	  </span><br />
	  <span id="line2">
            {{ s21 }} {{s22 }} {{ s23 }} {{ s24 }} {{ s25 }} {{ s26 }} {{ s27 }}
	  </span><br />
	  <span id="line3">
            {{ s31 }} {{s32 }} {{ s33 }} {{ s34 }} {{ s35 }}	    
	  </span><br />
	</p>
      </div><!--poem-->

      <form id="addWord">
	<button id="add">Add Word</button>
	<div id="syll">
	  How many syllables?
	  <input type="number" min="1" max="7" step="1" 
		 value="1">
	</div><!--syll-->
      </form>
    </div><!--container-->
  </body>
</html>
